<template>
<view>
<!-- index.wxml -->
<!--<import src="../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<!-- <navigator class="ceshi" url="/pages/topicality/zhuanti/zhuanti?city={{citycode}}&action=qixi">七夕</navigator> -->
<!-- <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取用户信息</button> -->
<view style="background-color: snow;">
  <view v-if="showloading">
    <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113154424_32766.png" mode="widthFix" style="width: 100%;"></image>
  </view>
  <view class="body" @tap.stop="indexBtn" v-else>
    <view class="bg" :style="'padding-top:' + (navtop+inputHeight+8) + 'px;height:' + (navtop+inputHeight+8+188) + 'px;'">
    <view class="search-fixed" :style="'padding-top:' + navtop + 'px;background-color: rgba(255, 127, 42,' + (scrollTop / 260 > 1 ? 1 : scrollTop / 260) + ');'">
      <navigator class="city-box flex-row" url="/pages/city/city?pagetype=index" hover-class="none">
        <text>{{city}}</text>
        <image src="/static/images/index/dwicon.png" mode></image>
      </navigator>
      <navigator class="input-box flex-row" url="/pages/search/search" hover-class="none" :style="'height:' + inputHeight + 'px'">
        <image src="/static/images/index/sousuo.png" mode></image>
        <text>请搜索关键词</text>
      </navigator>
    </view>
    <view class="topic-box" v-if="hotbsyData.length>1">
        <view class="topic">
          <view v-for="(item, index) in hotbsyData" :key="index" class="item flex-col" @tap="servBtn" :data-index="index" :data-path="item.path" :data-appid="item.appid" :data-title="item.title">
            <image :src="item.logo" mode></image>
            <text class="text-over">{{item.stitle}}</text>
          </view>
        </view>
    </view>
    </view>
    <!-- 118 -->
    <view style="margin-top:24rpx;">
      <!-- 热点资讯 -->
      <navigator url="/pages/hotmessage/hotmessage" class="hot-message" v-if="hotMessage">
        <view class="hot-title">
          <image src="/static/images/hot.png" class="hot"></image>
          <text>热点资讯</text>
        </view>
        <view v-for="(item, index) in hotMessage" :key="index" class="hot-item">
          <text class="hot-index">{{index + 1}}</text>
          <text class="hot-content">{{item.title}}</text>
          <image :src="index <=2 ? 'http://imgbdb3.bendibao.com/whbdb/202010/16/20201016102722_23755.png' : 'http://imgbdb3.bendibao.com/whbdb/202010/15/20201015181924_70946.png'"></image>
        </view>
      </navigator>
      <view v-if="bannerArray!=''">
        <swiper indicator-dots="true" autoplay="true" indicator-color="#CCCCCC" indicator-active-color="#959595" circular="true" class="swiper">
          <view v-for="(item, index) in bannerArray" :key="index" @tap="bannerClick" :data-path="item.path" :data-appid="item.appid" :data-title="item.title">
            <swiper-item>
              <image :src="item.pic" class="lunboimg"></image>
            </swiper-item>
          </view>
        </swiper>
      </view>
      <view v-for="(info, index) in infolist" :key="index" class="article-box">
        <view class="pd-title">
          <view class="flex-row">
            <image src="/static/images/dbline.png" mode style="width: 16rpx;height: 28rpx;margin-right: 11rpx;"></image>
            <view class="pd">{{info.wapname}}</view>
          </view>
          <view class="flex-row">
            <view v-for="(item, index2) in info.classlist" :key="index2" class="lanmu">
              <navigator hover-class="none" :url="'/pages/article/lanmu/lanmu?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode">
                {{item.classname}}
              </navigator>
            </view>
          </view>
        </view>
        <view v-for="(item, index2) in info.infolist" :key="index2" class="pd-item">
          <navigator class="items" :url="'/pages/article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode" hover-class="none">
            <view class="title-box">
              <view class="title">{{item.title}}</view>
              <view class="time">{{item.publictime}}</view>
            </view>
            <image :src="item.images" mode="aspectFill" v-if="item.images"></image>
          </navigator>
        </view>
        <navigator class="see-more" hover-class="none" :url="'/pages/article/channel/channel?id=' + info.id + '&type=' + info.pagetype + '&city=' + citycode">
          <view>查看更多</view>
        </navigator>
      </view>
      <view class="app-bottom" style="background-color: #f6f5f8;">
        <image src="/static/images/logo.png" mode></image>
      </view>
    </view>
  </view>
</view>
<!-- 收藏小程序提示 -->
<view class="cue-box" v-if="indexCue">
  <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113154118_24834.png"></image>
</view>
<!-- <navigator url="/pages/topicality/hesuanjiance/all/all?city=wh">武汉核酸政策查询</navigator> -->
</view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp();
const util = require("../../utils/util.js");
var QQMapWX = require("../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
var hotMessageNum = 4;

export default {
  data() {
    return {
      menuIndex: 0,
      // cityname: app.extConfig.cityname,
      bottomHeight: 0,
      showtk: false,
      indexCue: true,
      city: "深圳",
      citycode: 'sz',
      hotList: [],
      toView: '',
      infolist: [],
      wendaData: [],
      channelFixed: "",
      scrollflag: false,
      topNum: "150",
      showloading: true,
      navtop: 44,
      inputHeight: 30,
      // scrollArr:[],
      // topShow:true,
      // heightArr: ["857", "1528", "2232", "2911"]
      tools: [{
        name: "查办事",
        img: "/static/images/index/banshi.png",
        path: "/pages/tools/allServices/allServices?menuIndex=0"
      }, {
        name: "查交通",
        img: "/static/images/index/jiaotong.png",
        path: "/pages/tools/allServices/allServices?menuIndex=2"
      }, {
        name: "查活动",
        img: "/static/images/index/huodong.png",
        path: "/pages/tools/hdcx/hdcx"
      }, {
        name: "常用查询",
        img: "/static/images/index/changyong.png",
        path: "/pages/tools/commonQuery/commonQuery"
      }],
      hotMessage: [],
      hotbsyData: [],
      bannerArray: [],
      showTap: "",
      winHeight: "",
      wendalist: "",
      scrollTop: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (opt) {
    if (uni.getStorageSync("indexCue")) {
      this.setData({
        indexCue: false
      });
    }

    this.setData({
      citycode: opt.city ? opt.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : this.citycode,
      showTap: app.globalData.showTap
    });
    uni.setStorageSync('citycode', this.citycode);
    util.getUrl(app.globalData.url).then(res => {
      util.cityList().then(res => {
        let allcity = res.allcity;

        if (!opt.city) {
          qqmapsdk.reverseGeocoder({
            success: res => {
              let city = res.result.address_component.city;
              let citydata;
              if (allcity && Array.isArray(allcity)) citydata = allcity.filter(v => {
                if (city != undefined) {
                  if (city.indexOf(v.cityname) != -1) {
                    return v;
                  }
                }
              });

              if (city && !city.includes(uni.getStorageSync("city"))) {
                if (citydata && citydata[0]) {
                  let citycode = citydata[0] ? citydata[0].citycode : '';
                  uni.showModal({
                    title: '温馨提醒',
                    content: '当前城市与您定位城市不一样，是否切换城市？',
                    success: res => {
                      if (res.confirm) {
                        uni.reLaunch({
                          url: '/pages/index/index?city=' + citycode
                        });
                      }
                    }
                  });
                } else {
                  return;
                }
              }
            }
          });
        }

        let citydatas;
        if (allcity && Array.isArray(allcity)) citydatas = allcity.filter(v => v.citycode == this.citycode);
        if (Array.isArray(citydatas) && citydatas.length) this.setData({
          city: Array.isArray(citydatas) ? citydatas[0].cityname : this.city
        });
        uni.setStorageSync('city', this.city);
        this.setData({
          showloading: true
        });
        this.getBannerData();
        this.getInfoData();
        this.getwendaData();
        this.getHotztData();
        this.getHotMessage(hotMessageNum);
      }); // this.getCityConfig();
    }); //获取胶囊位置信息

    if (uni.getMenuButtonBoundingClientRect) {
      let menuButtonObject = uni.getMenuButtonBoundingClientRect();
      if (menuButtonObject) this.setData({
        navtop: menuButtonObject.top,
        inputHeight: menuButtonObject.height
      });
    } // 获取屏幕高度


    uni.getSystemInfo({
      success: res => {
        var clientHeight = res.windowHeight,
            clientWidth = res.windowWidth,
            rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR;
        this.setData({
          winHeight: calc
        });
      }
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: "本地宝",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg",
      path: "/pages/index/index"
    };
  },
  onShareTimeline: function () {
    return {
      title: "本地宝",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },
  methods: {
    // 获取热点资讯
    getHotMessage(num) {
      util.request('phb.php', {
        citycode: this.citycode
      }, "GET").then(res => {
        if (res.data && Array.isArray(res.data)) {
          if (res.data.length > 0) {
            this.setData({
              hotMessage: res.data.splice(0, num)
            });
          }
        }
      });
    },

    //获取热门办事
    getHotztData() {
      let toolData = {
        action: "tools",
        city: uni.getStorageSync("city") ? uni.getStorageSync("city") : this.city,
        keywords: "",
        version: app.globalData.version,
        type: "热门办事"
      };
      util.request('service.php', toolData, "POST").then(res => {
        if (res.data.data) {
          res.data.data = res.data.data.slice(0, 8);
          let hotbsyData = [];
          hotbsyData = res.data.data;
          this.setData({
            hotbsyData
          });
        } // this.showView();

      });
    },

    // 查询点击
    toolsBtn(e) {
      let path = e.currentTarget.dataset.path;

      if (path) {
        uni.navigateTo({
          url: path
        });
      }
    },

    // 首页swiper-banner
    getBannerData() {
      let bannerData = {
        action: 'lunbo',
        city: uni.getStorageSync("city"),
        block: "首页",
        blockvalue: "",
        version: app.globalData.version
      };
      util.request('service.php', bannerData).then(res => {
        this.setData({
          bannerArray: res.data.data
        });
      });
    },

    // 其他频道内容
    getInfoData() {
      let infoData = {
        citycode: this.citycode,
        action: 'indexlist',
        pagesize: 4,
        version: app.globalData.version
      };
      util.request('index.php', infoData, 'GET').then(res => {
        // let infores = res.data.filter(v => v.wapname != "办事");
        let infores = res.data;
        this.setData({
          infolist: infores
        });
        this.setData({
          showloading: false
        });
      });
    },

    // 问答接口
    getwendaData() {
      let infoData = {
        citycode: "wenda",
        action: 'list',
        pagesize: 4,
        siteid: 46,
        city: uni.getStorageSync("city"),
        version: app.globalData.version
      };
      util.request('index.php', infoData, 'GET').then(res => {
        this.setData({
          wendalist: res.data
        });
      });
    },

    // 页面点击事件
    indexBtn() {
      uni.setStorageSync("indexCue", "indexCue");
      this.setData({
        indexCue: false
      });
    },

    // 栏目点击事件
    lanmuTap(e) {
      let id = e.currentTarget.dataset.id;
      let type = e.currentTarget.dataset.type; // let name = e.currentTarget.dataset.name;

      uni.navigateTo({
        url: '../article/list/list?id=' + id + '&type=' + type + '&city=' + this.citycode
      });
    },

    // banner点击事件
    bannerClick(e) {
      let path = e.currentTarget.dataset.path;
      let linkname = e.currentTarget.dataset.title;
      let appid = e.currentTarget.dataset.appid;

      if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1 && !appid) {
        this.setData({
          showtk: true
        });
        util.navContact(linkname, path);
      } else {
        util.navMethod(path, appid);
      }
    },

    // 工具、服务点击事件
    servBtn(e) {
      let index = e.currentTarget.dataset.index;
      let stitle = this.hotbsyData[index].title;
      let path = e.currentTarget.dataset.path;
      let linkname = e.currentTarget.dataset.title;
      let appid = e.currentTarget.dataset.appid;

      if (linkname === "全部") {
        uni.navigateTo({
          url: "/pages/tools/allServices/allServices"
        });
      } else {
        if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1) {
          this.setData({
            showtk: true
          });
          util.navContact(linkname, path);
        } else {
          let scene = util.getScene(uni.getLaunchOptionsSync().scene);
          util.navMethod(path, appid, stitle, scene);
        }
      }
    },

    // 进入客服会话
    contact(e) {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function (e) {
      if (!uni.getStorageSync("indexCue")) {
        uni.setStorageSync("indexCue", "indexCue");
      }

      this.setData({
        indexCue: false,
        scrollTop: e.scrollTop
      });
    }
  }
};
</script>
<style>
/**index.wxss**/
.bg {
  background: url("http://imgbdb3.bendibao.com/xcxbdb/file/20214/2/20210402160953_69119.jpeg") no-repeat center/cover;
  width: 100%;
  height: 495rpx;
  box-sizing: border-box;
}

.ceshi {
    background-color: #fdefe4;
    padding: 20rpx 40rpx;
    font-size: 26rpx;
    border-radius: 12rpx;
    font-family: PingFang SC;
    font-weight: 600;
    color: #ff7920;
    text-align: center;
    margin-bottom: 10rpx;
}

page {
    /* background-color: #f6f5f8; */
    height: 100%;
}

.lunboimg {
    height: 400rpx;
    width: 100%;
    border-radius: 0 0 40rpx 40rpx;
}


/* 收藏小程序的提示 */

.cue-box {
    position: fixed;
    top: 170rpx;
    right: 88rpx;
}

.cue-box image {
    width: 554rpx;
    height: 83rpx;
}
.swiper{
    width: 714rpx;
    height: 230rpx;
    margin: 0 auto; 
}
.swiper image{
    border-radius: 20rpx;
    width: 100%;
		height: 202rpx;
}

.wx-swiper-dots.wx-swiper-dots-horizontal {
    margin-bottom: 15rpx;
}

.serve-box {
    width: 90%;
    background: #fff;
    border-radius: 14rpx;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.09);
    position: absolute;
    top: 320rpx;
    left: 34rpx;
    padding: 30rpx 0;
}

.serve-box .gongju {
    padding: 0 70rpx 0 50rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.serve-box .gongju .item image {
    width: 92rpx;
    height: 92rpx;
    margin-bottom: 14rpx;
}

.serve-box .gongju .item text {
    width: 96rpx;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #545454;
}

.flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}



.topic-box .topic {
    /* padding: 0 70rpx; */
    box-sizing: border-box;
    padding: 28rpx 50rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 714rpx;
    height: 188px;
    opacity: 1;
    background: #ffffff;
    margin: 0 auto;
    border-radius: 14rpx;
    box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 5%);
}

.topic-box .topic .item {
    width: 25%;
    margin-bottom: 14px;
}
.topic-box .topic .item:nth-child(4n) {
    margin-right: 0;
}

.topic-box .topic .item image {
    width: 106rpx;
    height: 106rpx;
    margin-bottom: 4rpx;
}

.topic-box .topic .item text {
    width: 60px;
    font-size: 24rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #545454;
}

.line {
    width: 100%;
    height: 6px;
    background: #fafafa;
}

.article-box {
    padding: 30rpx 40rpx 0 40rpx;
    border-bottom: 15rpx solid #f5f5f5;
    background-color: #fff;
}

.pd-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.pd {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: bolder;
    color: #242424;
}

.lanmu {
    white-space: nowrap;
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #939393;
    border-right: 2rpx solid #939393;
    padding: 0 9px;
}

.lanmu:last-child {
    padding-right: 0;
    border: 0;
}

.pd-item {
    margin-top: 16px;
}

.pd-item .items {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.pd-item .items image {
    width: 198rpx;
    height: 144rpx;
    flex-shrink: 0;
    border-radius: 12rpx;
}

.pd-item .items .title-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 20rpx;
}

.pd-item .items .title-box .title {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 700;
    text-align: left;
    color: #333;
    line-height: 40rpx;
}

.pd-item .items .title-box .time {
    font-size: 22rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: left;
    color: #989696;
    margin-top: 20rpx;
}

.see-more {
    padding: 32rpx 0;
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: center;
    color: #f60;
    line-height: 32rpx;
}

.search-fixed {
    box-sizing: border-box;
    position: fixed;
    top: 0;/*  #ifdef  H5  */
    top: calc(88rpx + constant(safe-area-inset-top));
    top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
    width: 100%;
    z-index: 99;
    padding-bottom: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: center; */
}

.city-box {
    margin-left: 30rpx;
}

.city-box image {
    width: 18rpx;
    height: 10rpx;
    margin-left: 10rpx;
}

.city-box text {
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    white-space: nowrap;
    color: #fff;
    z-index: 1;
}

.input-box {
    width: 366rpx;
    /* height: 68rpx; */
    background: #f7f7f7;
    border-radius: 34rpx;
    box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(151, 151, 151, 0.05);
    z-index: 1;
    margin-left: 20rpx;
    padding-left: 20rpx;
}

.input-box image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 6rpx;
}

.input-box text {
    font-size: 26rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    color: #a7a6a6;
}

.hot-message {
    padding-top: 28rpx;
    background-color: #ffffff;
    padding-left: 40rpx;
    padding-bottom: 30rpx;
    counter-reset: num;
}

.hot-title {
    display: flex;
    align-items: center;
    margin-bottom: 28rpx;
    font-size: 32rpx;
    font-weight: bold;
}



.hot {
    width: 29rpx;
    height: 39rpx;
    margin-right: 14rpx;
}

.hot-message .hot-item {
    margin-bottom: 24rpx;
    padding-right: 20rpx;
}
.hot-message .hot-item .hot-content{
    width: 100%;
}
.hot-message .hot-item text {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    font-size: 30rpx;
}

.hot-message .hot-item {
    display: flex;
    align-items: center;
    max-width: 95%;
    font-size: 24rpx;
    color: #5A5A5A;
}

.hot-message .hot-item:nth-child(2) .hot-index {
    color: #FE1A29;
}

.hot-message .hot-item:nth-child(3) .hot-index {
    color: #FF893A;
}

.hot-message .hot-item:nth-child(4) .hot-index {
    color: #FFAB3A;
}

.hot-message .hot-item:nth-child(5) .hot-index {
    color: #B6B6B6;
}

.hot-index {
    margin-right: 12rpx;
    flex-shrink: 0;
}

.hot-message .hot-item image {
    flex-shrink: 0;
    width: 30rpx;
    height: 30rpx;
    margin-left: 16rpx;
}

.index-content {
    margin-top: 118rpx;
}

@media (min-width: 768px) {
    .topic-box .topic .item text {
        display: inline-block;
        width: 120rpx;
    }

    .input-box {
        padding-top: 16rpx;
        padding-bottom: 16rpx;
    }
}

.text-over {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}
</style>